<template>
  <div class="screen-header">
    <div class="header-left">
        <span class="datetime">{{ currentTime }}</span>
    </div>
    <div class="header-center">
      <h1 class="title">智慧产业园区数据中心</h1>
    </div>
    <div class="header-right">
      <div class="weather">
        <el-icon><Sunny /></el-icon>
        <span>晴 16 ~ 24°C</span>
      </div>
      <div class="user" @click="goBack">
        <el-icon><User /></el-icon>
        <span>{{ store.state.userInfo.username || 'admin' }}</span>
      </div>
       <div class="fullscreen-btn">
         <el-icon @click="toggle" style="cursor: pointer;"><FullScreen /></el-icon>
       </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { Sunny, User, FullScreen } from '@element-plus/icons-vue';

const store = useStore();
const router = useRouter();

const emit = defineEmits(['toggle']);
const toggle = () => {
  emit('toggle');
}

const goBack = () => {
    router.push('/admin');
}

const currentTime = ref('');
let timer = null;

const updateTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    currentTime.value = `${year}年${month}月${day}日 ${week} ${hours}:${minutes}:${seconds}`;
}

onMounted(() => {
    updateTime();
    timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
    clearInterval(timer);
});
</script>

<style scoped>
.screen-header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 0 30px;
  background-image: url('@/assets/images/screen-bg4.png'); /* Use a dedicated header background if available */
  background-size: cover;
  background-position: center;
  position: relative;
  border-bottom: 2px solid #00a2ff;
  text-shadow: 0 0 5px rgba(0, 162, 255, 0.7);
}

.header-center {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 5px;
    text-shadow: 0 0 15px #00e5ff;
}

.title {
    margin: 0;
    font-weight: bold;
}

.header-left, .header-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-right {
    justify-content: flex-end;
    gap: 20px;
}

.datetime {
    font-size: 18px;
}

.weather, .user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fullscreen-btn {
    font-size: 20px;
}

.user {
    cursor: pointer;
}
</style> 